<template>
	<view>
		<view class="mixed">
			<view class="time">
				<view class="left">
					<image src="../static/img/shijian@2x.png" mode=""></image>
					<text>{{msg[0].needtime}}分钟以上</text>
				</view>
				<view class="left">
					<image src='../static/img/xing @2x.png' mode=""></image>
					<text>切镦（初级）</text>
				</view>
			</view>
			<!-- 表格 -->
			<uni-table border-bottom stripe class='table'>
				<!-- 表头行 -->
				<uni-tr>
					<uni-th align="center">用料</uni-th>
					<uni-th align="center" v-if="falg" >
						<text @click='change1(msg[0]._id)'>加入采购清单</text></uni-th>
					<uni-th align="center" v-else>
						<text @click='change1()'>移出采购清单</text></uni-th>
				</uni-tr>
				<!-- 表格数据行 -->
				<uni-tr v-for="item in msg[0].ingredient" :key="item">
					<uni-td align="center">{{item.name}}</uni-td>
					<uni-td align="center">{{item.number}}</uni-td>

				</uni-tr>


			</uni-table>
			<!-- 配料信息 -->
			<view class="mix-message">
				<h1>小贴士</h1>
				<h2>【用量换算】</h2>
				<p>1 汤勺=15ml；1茶匙=3g</p>
				<h3>【原料选择】</h3>
				<view class="tips" v-for="item in msg[0].tips" :key="item">
					<p>{{item.tipname}}:</p>
					<p>{{item.tipdescribe[0]}}</p>
				</view>
				<h3>【烹饪要点】</h3>
				<p>1.怎样使凉粉的味道有层次感？
					首先放入榨菜末，增加清脆的口感，然后放入香葱，提升菜的香气，接下来放入红油，提升菜的辣味和香味，最后放入花生碎，提升口感。
					2.为什么没有放盐？
					在调味时已烹入酱油、豆瓣酱等调味料，故无需要再加盐。如果口味较重，也可根据需求酌情添加。</p>
			</view>

		</view>
	</view>
</template>

<script>
	import {getCollectApi,getUserInfoApi} from "@/apis/mine.js"
	export default {
		props: ['msg'],
		data(){
			return{
				falg:true
			}
		},
		methods:{
			change1(id){
				let {_id}=uni.getStorageSync('userinfo')
				let token=uni.getStorageSync('token')
				let obj={
						user_id:_id,
						menu_id:id
				}
				this.falg=!this.falg
				getCollectApi(obj).then(res=>{
					console.log(res);
					getUserInfoApi(token).then(val=>{
						console.log(val);
						uni.setStorageSync("userinfo",val[0]);
					})
				})
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mixed {
		width: 100%;
		padding: 40rpx 32rpx 0 32rpx;
		box-sizing: border-box;

		.time {
			display: flex;
			justify-content: center;

			.left {
				margin-right: 20rpx;

				image {
					width: 36rpx;
					height: 36rpx;
					vertical-align: middle;
				}

				text {
					font-size: 24rpx;
				}
			}
		}
	}

	.table {
		width: 100%;
	}
	.mix-message{
		h1{
			margin: 20rpx 0;
			font-weight: bold;
		}
		p{
			margin: 20rpx 0;
			font-size: 28rpx;
		}
	}
</style>
